(function(){
  const h = Inferno.h
  const cns = classNames

  const cols = ['red', 'green', 'blue', 'yellow']
  const rows = ['fish', 'crab', 'whale', 'shell', 'star']
  const animalMap = {
    fish: '🐠',
    crab: '🦀',
    whale: '🐳',
    shell: '🐚',
    star: h('img', {
      src: "img/star.png",
      style: {width: '1em', height: '1em'}
    })
  }

  class UBoat extends Inferno.Component{
    constructor(props){
      super(props)
      let cellSize = window.innerWidth/6
      if(cellSize>100) cellSize = 100
      this.state={
        cellSize,
        selCol: null,
        selRow: null
      }
    }

    render(){
      return h('.wrapper', [
        h('.ctn', [this.renderTable()])
      ])
    }

    renderTable(){
      const {cellSize} = this.state
      return h('table', {
        cellSpacing: "2",
        cellPadding: "0",
        style: {'font-size': cellSize/2+'px'}
      }, [
        h('tr', [
          h('th', {width:cellSize}),
          ...cols.map(c=>
            h('th', {width:cellSize}, [
              h('.head-color ',
                {
                  className: c,
                  style:{height: cellSize/3+'px'},
                  onClick:()=>this.setState({
                    selCol: c==this.state.selCol ? null : c
                  })
                },
              )
            ])
          )
        ]),
        ...this.getBody()
      ])
    }

    getBody(){
      const {cellSize, selRow, selCol} = this.state
      const cellStyle = {
        height: cellSize + 'px',
      }
      return rows.map(row=>{
        const selected = row == selRow
        return h('tr', [
          h('td', [
            h('.cell', {
              className: cns('row-head', selected && 'sel-row'),
              style: cellStyle,
              onClick:()=>this.setState({
                selRow: row==selRow ? null : row
              })
            }, [animalMap[row]])
          ]),
          cols.map(col=>{
            return h('td', [
              h('.cell', {
                className: cns(selected && 'sel-row', col==selCol && 'sel-col'),
                style: cellStyle
              }),
              h('.cell-handle', {
                className: cns(),
                onClick:()=>{
                  this.setState({
                    selCol: col,
                    selRow: row
                  })
                }
              })
            ])
          })
        ])
      })
    }
  }

  Inferno.render(h(UBoat), document.getElementById('app'))
})()
